<template>
  <el-dialog
    title="控制"
    v-model="state.show"
    width="500px"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    append-to-body
    destroy-on-close
  >
    <el-form ref="formRef" label-width="60px">
      <el-form-item label="重置">
        <el-button type="primary" @click="handleReset()">
          重置
        </el-button>
      </el-form-item>
      <el-form-item label="组网">
        <div>组网设备数量：{{ discoveredDeviceCount }}</div>
        <div class="networking-buttons">
          <el-button type="primary" plain @click="handleNetworking1()">
            1. 开始搜索设备
          </el-button>
          <el-button type="primary" plain @click="handleNetworking2()">
            2. 查询搜索数量
          </el-button>
          <el-button type="primary" plain @click="handleNetworking3()">
            3. 确认组网
          </el-button>
          <el-button type="primary" plain @click="handleNetworking4()">
            4. 查询组网数量
          </el-button>
          <el-button type="primary" plain @click="handleNetworking5()">
            5. 设备入网
          </el-button>
          <el-button type="primary" plain @click="handleNetworking6()">
            6. 重启
          </el-button>
        </div>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script lang="ts" setup>
import { serviceInvoke, getDevicesDetail } from '../api/devices.api'

const state = reactive({
  show: false,
  row: {} as any,
})

const openDialog = (row: any) => {
  state.show = true
  state.row = row
  if (state.row.deviceId) {
    getToponum()
  }
}

/** 通用serviceInvoke调用函数 */
const invokeService = async (service: string, args: any = {}, confirmMsg?: string, needUpdateToponum: boolean = false) => {
  try {
    // 如有确认消息则显示确认框
    if (confirmMsg) {
      await ElMessageBox.confirm(
        confirmMsg,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
    }
    
    // 调用serviceInvoke接口
    const res = await serviceInvoke({
      deviceId: state.row.deviceId,
      service,
      args
    })
    
    // 处理响应
    if (res.code === 200) {
      ElMessage.success('操作成功')
      if (needUpdateToponum) {
        getToponum()
      }
    } else {
      ElMessage({
        type: 'error',
        message: res.message,
      })
    }
  } catch (error) {
    // 捕获取消操作的异常
    if (error !== 'cancel') {
      ElMessage.info('已取消操作')
    }
  }
}

/** 重置按钮操作 */
const handleReset = () => {
  invokeService('resetCfg', {}, '此操作将清空网关下所有设备，确认要执行吗？')
}

/** 组网按钮操作 */
const handleNetworking1 = () => {
  invokeService('netSearch', {}, '请确认是否进入搜索流程？')
}

const handleNetworking2 = () => {
  invokeService('netNum', {}, undefined, true)
}

const handleNetworking3 = () => {
  invokeService('netSearchProductKey', {}, '请确认是否进入组网流程？')
}

const handleNetworking4 = () => {
  invokeService('netNumProductKey', {}, undefined, true)
}

const handleNetworking5 = () => {
  invokeService('selectNet', { toponum: discoveredDeviceCount.value }, '请确认是否进入设备入网流程？')
}

const handleNetworking6 = () => {
  invokeService('rebootSystem', {}, '请确认是否重启网关？')
}

const discoveredDeviceCount = ref(0)
// 查询组网成功设备数量
const getToponum = async () => {
  await getDevicesDetail(state.row.deviceId)
  .then((res) => {
    discoveredDeviceCount.value = res.data.property?.toponum?.value || 0
  })
}

defineExpose({
  openDialog,
})
</script>
<style lang="scss" scoped>
.networking-buttons {
  display: flex;
  flex-wrap: wrap;
  margin: -5px;
  > button {
    width: calc(50% - 60px);
    margin: 7px 5px;
    justify-content: flex-start;
  }
}
</style>